/**
 *
 * 用法：
 * main.js中：
 * import myDirectives from "./directives/mydirectives.js"
 * Vue.use(myDirectives);
 * 在DOM上  v-swipeleft="left"
 * methods中定义  left 方法
 *
 * @author Roninwz
 * @date 2019/2/27 下午14:51
 * @since 1.0.0
 */

export default (Vue) => {
  function vueTouch(el, binding, type) {//触屏函数
    let _this = this;
    this.obj = el;
    this.binding = binding;
    this.touchType = type;
    this.vueTouches = {x: 0, y: 0};//触屏坐标
    this.vueMoves = true;
    this.vueLeave = true;
    this.vueCallBack = typeof(binding.value) === "object" ? binding.value.fn : binding.value;
    this.obj.addEventListener("touchstart", function (e) {
      _this.start(e);
    }, false);
    this.obj.addEventListener("touchend", function (e) {
      _this.end(e);
    }, false);
    this.obj.addEventListener("touchmove", function (e) {
      _this.move(e);
    }, false);
  }

  vueTouch.prototype = {
    start: function (e) {//监听touchstart事件
      this.vueMoves = true;
      this.vueLeave = true;
      this.longTouch = true;
      this.vueTouches = {x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY};
      this.time = setTimeout(function () {
        if (this.vueLeave && this.vueMoves) {
          this.touchType === "longtap" && this.vueCallBack(this.binding.value, e);
          this.longTouch = false;
        }
      }.bind(this), 1000);
    },
    end: function (e) {//监听touchend事件
      let disX = e.changedTouches[0].pageX - this.vueTouches.x;//计算移动的位移差
      let disY = e.changedTouches[0].pageY - this.vueTouches.y;
      clearTimeout(this.time);
      if (Math.abs(disX) > 10 || Math.abs(disY) > 100) {//当横向位移大于10，纵向位移大于100，则判定为滑动事件
        this.touchType === "swipe" && this.vueCallBack(this.binding.value, e);//若为滑动事件则返回
        if (Math.abs(disX) > Math.abs(disY)) {//判断是横向滑动还是纵向滑动
          if (disX > 10) {
            this.touchType === "swiperight" && this.vueCallBack(this.binding.value, e);//右滑
          }
          if (disX < -10) {
            this.touchType === "swipeleft" && this.vueCallBack(this.binding.value, e);//左滑
          }
        } else {
          if (disY > 10) {
            this.touchType === "swipedown" && this.vueCallBack(this.binding.value, e);//下滑
          }
          if (disY < -10) {
            this.touchType === "swipeup" && this.vueCallBack(this.binding.value, e);//上滑
          }
        }
      } else {
        if (this.longTouch && this.vueMoves) {
          this.touchType === "tap" && this.vueCallBack(this.binding.value, e);
          this.vueLeave = false
        }
      }
    },
    move: function (e) {//监听touchmove事件
      this.vueMoves = false;
    }
  };
  Vue.directive("tap", {//点击事件
    bind: function (el, binding) {
      new vueTouch(el, binding, "tap");
    }
  });
  Vue.directive("swipe", {//滑动事件
    bind: function (el, binding) {
      new vueTouch(el, binding, "swipe");
    }
  });
  Vue.directive("swipeleft", {//左滑事件
    bind: function (el, binding) {
      new vueTouch(el, binding, "swipeleft");
    }
  });
  Vue.directive("swiperight", {//右滑事件
    bind: function (el, binding) {
      new vueTouch(el, binding, "swiperight");
    }
  });
  Vue.directive("swipedown", {//下滑事件
    bind: function (el, binding) {
      new vueTouch(el, binding, "swipedown");
    }
  });
  Vue.directive("swipeup", {//上滑事件
    bind: function (el, binding) {
      new vueTouch(el, binding, "swipeup");
    }
  });
  Vue.directive("longtap", {//长按事件
    bind: function (el, binding) {
      new vueTouch(el, binding, "longtap");
    }
  });


}

